<template>
  <div v-for=" (fileData, index) in startFileData" :key="index">
    <el-switch v-model="fileData.startMode" size="large" active-text="启动程序" inactive-text="执行命令" />
    <el-input :disabled="!fileData.editStatus" v-model="fileData.url" style="width: 300px" placeholder="请输入路径或者命令...">
      <template #suffix>
        <el-icon class="el-input__icon mouse-style" @click="fileData.editStatus = !fileData.editStatus">
          <el-tooltip :disabled="disabled" content="编辑" placement="bottom" :hide-after=0 effect="light">
            <Edit v-show="!fileData.editStatus" />
          </el-tooltip> 
          <el-tooltip :disabled="disabled" content="保存"  placement="bottom" :hide-after=0 effect="light">
            <Select v-show="fileData.editStatus" @click="saveStartFile(fileData)" /> 
          </el-tooltip> 
        </el-icon>
      </template>
    </el-input>
    <el-button type="primary" v-model="fileData.startMode" @click="checkedFile(fileData)">{{ fileData.startMode ? "选择文件"
      : "选择文件夹" }}</el-button>
    <el-button type="primary" @click="ls(fileData)">启动</el-button>
    <el-button type="danger" @click="delStartFile(fileData)" :icon="Delete" circle />
  </div>
  <el-button @click="addStartFile">添加</el-button>
</template>

<script setup lang="ts">
import { onMounted, ref,Ref } from 'vue'
import { ipcRenderer } from 'electron'
import { Edit, Select,Delete } from "@element-plus/icons-vue";
import { saveStartFileApi,getStartFileApi, updateStartFileApi, delStartFileApi } from '@renderer/api/fileApi';

type FileData = {
  id?:String,
  url:String,
  startMode:Boolean,
  editStatus:Boolean,
  isAdd?:Boolean
}

const disabled = ref(false)
const startFileData:Ref<Array<FileData>> = ref([{
  url: '',
  startMode: true,
  editStatus: false,
  isAdd:true
}])

const saveStartFile = (fileData:FileData)=>{
  fileData.editStatus = false
  if(fileData.isAdd){
    saveStartFileApi(fileData).then(res=>{
      console.log(res)
      getStartFileList(page)
    })
  }else{
    updateStartFileApi(fileData).then(res=>{
      console.log(res)
      getStartFileList(page)
    })
  }
}

const page = {current:'1',size:'10'}
const getStartFileList = (page)=>{
  getStartFileApi(page).then(res=>{
    startFileData.value = res.data.records
  },err=>{
    console.log(err)
  })
}

const delStartFile = (fileData)=>{
  delStartFileApi(fileData).then(res=>{
    console.log(res)
  })
}

const addStartFile = ()=>{
  startFileData.value.push({
    url:'',
    startMode:true,
    editStatus:true,
    isAdd:true
  })
}

const checkedFile = (fileData) => {
  fileData.editStatus = true
  ipcRenderer.invoke("getFilePath", fileData.startMode).then(res => {
    fileData.url = res
  });
}

let exec = require('child_process').exec;

// const multiLineCommand = `start cmd.exe /k "cd /d D:\/Redis-x64-2.8.2402&&redis-server redis.windows.conf"`;
function ls(fileData) {
  const { startMode, url } = fileData

  let multiLineCommand: string;

  if (startMode) {
    ipcRenderer.invoke("openFile", url).then(res => {
      console.log(res)
    }, err => {
      console.log(err)
    })
  } else {
    multiLineCommand = `start cmd.exe /k "cd /d ${url}"`
    exec(multiLineCommand, function (error: any, stdout: any, stderr: any) {
      if (error) {
        console.log(error.stack);
      }
      console.log('Child Process STDOUT: ' + stdout + stderr);
    });
  }
}

onMounted(()=>{
  getStartFileList(page)
})

</script>

<style lang="scss" scoped>
.el-input__icon {
  cursor: pointer !important;
  z-index: 1000 !important;
}
</style>